import React, { Component } from 'react';
import {
  Form,
  Icon,
  Input,
  Button,
  Checkbox,
  Radiom,
  message,
  Radio,
} from 'antd';
import { history } from 'umi';
import { reqLogin } from '@/services/users/login.js';
import './index.less';
class Login extends Component {
  handleSubmit = (e) => {
    e.preventDefault();
    const { form } = this.props;
    form.validateFields(async (err, values) => {
      if (!err) {
        // 请求登录
        const res = await reqLogin(values);
        if (res.status !== 200) {
          form.resetFields();
          return message.error(`${res.statusText}`);
        }
        message.success(
          `欢迎${res.userInfo.username}进入校园疫情管理系统~~~~~`,
        );
        window.localStorage.setItem('token', res.token);

        if (values.type == 1) {
          history.push('/user/admin');
        }
        if (values.type == 2) {
          history.push('/user/student');
        }
        if (values.type == 3) {
          history.push('/user/teacher');
        }
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    // Form.Item通用布局
    const formItemLayout = {
      labelCol: {
        span: 5,
      },
      wrapperCol: {
        span: 18,
      },
    };
    // Form.Item布局
    const tailFormItemLayout = {
      wrapperCol: {
        span: 24,
      },
    };
    return (
      <div id="login">
        <header>校园疫情管理系统</header>
        <Form {...formItemLayout} onSubmit={this.handleSubmit}>
          {/* 用户名 */}
          <Form.Item label="用户名">
            {getFieldDecorator('username', {
              rules: [
                {
                  required: true,
                  message: '用户名不能为空',
                },
              ],
            })(
              <Input
                prefix={
                  <Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />
                }
              />,
            )}
          </Form.Item>
          {/* 密码 */}
          <Form.Item label="密码" hasFeedback>
            {getFieldDecorator('password', {
              rules: [
                {
                  required: true,
                  message: '密码不能为空',
                },
              ],
            })(
              <Input.Password
                prefix={
                  <Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />
                }
              />,
            )}
          </Form.Item>
          {/* 用户类型 */}
          <Form.Item wrapperCol={{ span: 24 }} style={{ textAlign: 'center' }}>
            {getFieldDecorator('type', {
              rules: [
                {
                  required: true,
                  message: '类型不能为空',
                },
              ],
            })(
              <Radio.Group>
                <Radio value={1}>管理员</Radio>
                <Radio value={2}>学生</Radio>
                <Radio value={3}>教师</Radio>
              </Radio.Group>,
            )}
          </Form.Item>
          {/* 按钮区域 */}
          <Form.Item {...tailFormItemLayout} className="button-area">
            <Button type="primary" htmlType="submit">
              登录
            </Button>

            <Button onClick={() => this.props.form.resetFields()}>重置</Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

const WrappedLoginForm = Form.create({ name: 'normal_login' })(Login);
export default WrappedLoginForm;
